<template>
  <div>
    <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="11">
      <bm-polyline
        :path="polylinePath"
        stroke-color="blue"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="false"
        @lineupdate="updatePolylinePath"
      ></bm-polyline>
      <bm-marker
        :position="markerPoint"
        :icon="{
          url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
          size: { width: 52, height: 26 },
        }"
      ></bm-marker>
    </baidu-map>
    <button @click="handleStart">开始</button>
    <button @click="handleStop">停止</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      markerPoint: { lng: 116.404, lat: 39.915 },
      polylinePath: [{ lng: 116.404, lat: 39.915 }],
      play: true,
      path: [],
      icon: {
        url: "",
        size: { width: 52, height: 26 },
        opts: { anchor: { width: 27, height: 13 } },
      },
    };
  },
  methods: {
    handleStop() {
      clearInterval(this.timer);
    },
    handleStart() {
      this.timer = setInterval(() => {
        this.addPolylinePoint();
        if (this.polylinePath.length > 20) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
    updatePolylinePath(e) {
      console.log(e, "e--");
      //this.markerPoint = e.target.getPath()[0];
    },
    addPolylinePoint() {
      const end = this.polylinePath[this.polylinePath.length - 1];
      const point = { lng: end.lng + 0.01, lat: end.lat + 0.01 };
      this.markerPoint = point;
      this.polylinePath.push(point);
    },
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 11;
    },
  },
};
</script>
<style>
.map {
  width: 100%;
  height: 400px;
}
</style>
